<template>
  <div class="business-store-list">
    <!-- 头部 -->
    <div class="app-main-content-box">
      <div class="flexRBC">
        <div class="list-search">
          <el-input
            v-model="filterForm[searchSelect]"
            placeholder="请输入门店名称"
            class="input-with-select"
            @keyup.enter.native="searchByKeyword"
          >
            <!-- <el-select
              slot="prepend"
              v-model="searchSelect"
              placeholder="请选择"
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
          </el-input>
          <el-select
            slot="prepend"
            v-model="selectStatus"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in selectStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button
            type="primary"
            size="medium"
            :loading="searchLoading"
            round
            icon="el-icon-search"
            style="margin-left: 20px"
            @click="searchByKeyword"
          >查 询</el-button>
          <el-button
            type="primary"
            size="medium"
            :loading="searchLoading"
            round
            icon="el-icon-search"
            @click="searchReset"
          >重 置</el-button>
        </div>
        <!-- <el-button
          v-if="!$store.getters.banBtnList.includes('BTN_BRANCH_ADD')"
          type="primary"
          size="medium"
          round
          @click="goBusinessStoreAdd"
          >新增门店</el-button
        > -->
      </div>

      <div class="content">
        <!-- 筛选 -->
        <!-- <div class="app-main-filter-collapse-box">
          <el-collapse>
            <el-collapse-item title="按条件筛选" name="1">
              <div>
                <el-form ref="ruleForm" label-width="120px" size="mini">
                  <el-form-item label="筛选类型："></el-form-item>
                  <el-form-item size="large">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="submitForm('ruleForm')"
                    >筛选</el-button>
                    <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>-->
        <!-- 表格内容 -->
        <div class="list-table">
          <el-table
            v-loading="tableLoading"
            :data="list"
            border
            stripe
            style="width: 100%"
            empty-text="暂无数据"
          >
            <!-- <el-table-column label="LOGO" width="70" fixed>
              <template slot-scope="scope">
                <div class="table-avatar">
                  <img
                    v-if="scope.row.icon"
                    :src="fileBaseUrl + scope.row.icon"
                    alt
                  />
                </div>
              </template>
            </el-table-column> -->
            <el-table-column prop="shopName" label="门店简称" fixed />
            <template v-if="isBusinessDistrictMainStore">
              <el-table-column prop="storeNo" label="门店编号" />
              <el-table-column prop="shopName" label="分店类型" />
              <el-table-column prop="shopName" label="门店类型" />
            </template>
            <!-- <el-table-column prop="serial" label="门店编号" /> -->
            <el-table-column prop="address" label="门店地址" />
            <el-table-column prop="phone" label="门店电话" />
            <el-table-column prop="tradeTime" label="营业时间" />
            <el-table-column
              v-if="detail"
              prop="deliveryServiceConfig"
              :label="detail.industry <= 100 ? '就餐方式' : '配送服务'"
            >
              <template slot-scope="scope">
                {{
                  detail.industry <= 100
                    ? scope.row.diningConfig
                    : scope.row.deliveryServiceConfig
                }}
              </template>
            </el-table-column>
            <el-table-column prop="goodsCount" label="关联商品数">
              <template slot-scope="scope">
                <span
                  style="color: skyblue; cursor: pointer"
                  @click="jumpProductManage(scope.row)"
                >{{ scope.row.goodsCount }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="employeeCount" label="门店员工数">
              <template slot-scope="scope">
                <span
                  style="color: skyblue; cursor: pointer"
                  @click="jumpEmployees(scope.row)"
                >{{ scope.row.employeeCount }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="门店状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1">正常</span>
                <span v-if="scope.row.status == 0">禁用</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="goBusinessStoreEdit(scope.$index, scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="openBusinessStore(scope.$index, scope.row)"
                >
                  {{ scope.row.status == 1 ? "禁用" : "启用" }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination-direction
            v-if="paginationConfig.total !== 0"
            :config="paginationConfig"
            @sizeschange="sizesChange"
            @pagechange="pageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPubShopList, updatePubShop, getDetail } from '@/api/BusineCenter'
export default {
  data() {
    return {
      detail: {},
      // 配置
      selectOptions: [
        {
          value: 'shopName',
          label: '门店名称'
        },
        {
          value: 'serial',
          label: '门店编号'
        }
      ],
      selectStatusOptions: [
        {
          value: '1',
          label: '正常'
        },
        {
          value: '0',
          label: '禁用'
        }
      ],
      selectStatus: null, // 状态
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      searchSelect: 'shopName', // 搜索的类型

      // 状态
      tableLoading: false, // 表格loading
      searchLoading: false, // 表格loading
      // 数据
      list: [], // 表格数据
      // 筛选数据
      filterForm: {
        name: '',
        serial: '',
        status: ''
      }
    }
  },
  watch: {
    searchSelect(val) {
      this.filterForm.serial = ''
      this.filterForm.name = ''
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'userInfo', 'businessInfo']),
    isBusinessDistrictMainStore({ detail }) {
      return !!detail?.pubTag
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    /**
     * 获取数据
     */
    // 获取门店数据
    async initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      const { code, data } = await getDetail({
        id: this.businessInfo.syncTmpMerchantId
      })
      if (code === 0) {
        this.detail = data
      }
      // 加入page
      this.filterForm.page = page
      this.filterForm.pageSize = pageSize
      this.filterForm.status = this.selectStatus
      const params = Object.assign({}, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      this.tableLoading = true
      getPubShopList(params).then((res) => {
        this.tableLoading = false
        this.searchLoading = false
        this.list = res.data.list
        this.paginationConfig.total = res.data.total
        this.paginationConfig.page = res.data.pageNum
      })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange(page) {
      console.log('page', page)
      this.initData()
    },

    /**
     * 按钮组
     */
    // 点击搜索
    searchByKeyword() {
      this.searchLoading = true
      this.initData(1)
    },
    // 重置
    searchReset() {
      this.searchLoading = true
      this.filterForm.shopName = ''
      this.selectStatus = null
      this.initData(1)
    },

    // 点击新增
    goBusinessStoreAdd() {
      this.$router.push({
        name: 'BusinessStoreAdd'
      })
    },

    // 跳转详情
    goBusinessStoreEdit(index, row) {
      this.$router.push({
        name: 'BusinessStoreEdit',
        params: {
          id: row.id
        }
      })
    },

    // 启用
    openBusinessStore(index, row) {
      const _row = Object.assign({}, row)
      const params = _row
      params.status = _row.status === 1 ? 0 : 1
      updatePubShop(params)
        .then((res) => {
          if (res.code === 0) {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000,
              offset: 40
            })
            this.loading = false
            this.initData()
            this.$store.dispatch('GetManageShop')
          } else {
            this.loading = false
            this.$message.error(res.msg)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 筛选
    submitForm(formName) {
      this.initData(1)
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    jumpProductManage(row) {
      this.$router.push({
        name: 'productSkuManage',
        params: {
          id: row.id
        }
      })
    },
    jumpEmployees(row) {
      this.$router.push({
        name: 'Publicemployees',
        params: {
          shopId: row.shopId,
          shopName: row.shopName
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.business-store-list {
  /* 搜索*/
  .list-search {
    .el-select {
      width: 120px;
    }

    .el-input {
      width: 400px;
      margin-right: 10px;
    }
  }

  /* 表格 */
  .content {
    margin-top: 10px;

    .list-table {
      .table-avatar {
        overflow: hidden;
        width: 30px;
        height: 30px;
        border: 1px solid #f7f7f7;
        border-radius: 50%;
      }
    }
  }
}
</style>
